<template>
  <div>
    <div v-show="!chunkContentDisplay && !fileDetailContentDisplay" class="children_content">
      <div class="children_content_flex">
        <div class="left_box">
          <FormContent @update-detail="knowDetails = $event" />
        </div>

        <div class="right_box">
          <div class="breadcrumb-content">
            <CrumbContent name="知识库" @back="emit('back')" />

            <ul class="nav-list">
              <li
                v-for="(item, index) in NAV_OPTIONS"
                :key="index"
                :class="{ active: navCurrent === index }"
                @click="navCurrent = index"
              >
                {{ item }}
              </li>
            </ul>
          </div>

          <FAQ-content v-if="!navCurrent" :know-details="knowDetails" />
          <file-content
            ref="fileContentRef"
            v-if="navCurrent === 1"
            @chunk="openChunk"
            @file-detail="openFileDetail"
          />
          <TestContent v-if="navCurrent === 2" :know-details="knowDetails" />
        </div>
      </div>
    </div>

    <ChunkContent
      ref="chunkContentRef"
      v-if="chunkContentDisplay"
      @back="chunkContentDisplay = false"
    />

    <FileDetailContent
      ref="fileDetailContentRef"
      v-if="fileDetailContentDisplay"
      @back="fileDetailContentDisplay = false"
    />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, inject, watch, nextTick, computed } from 'vue'
import { Message } from 'view-ui-plus'
import moment from 'moment'

import { myKnowledge } from '@/api/modules/knowledgeBase'

import FormContent from './components/FormContent/index.vue'
import CrumbContent from '../components/CrumbContent.vue'
import TestContent from './components/TestContent.vue'
import ChunkContent from './components/ChunkContent/index.vue'
import FAQContent from './components/FAQContent/index.vue'
import FileContent from './components/FileContent/index.vue'
import FileDetailContent from './components/FileDetailContent/index.vue'

const NAV_OPTIONS = ['FAQ', '数据集', '搜索测试']

const emit = defineEmits(['back'])

const navCurrent = ref(1)
const knowDetails = ref({})

const chunkContentDisplay = ref(false)
const chunkContentRef = ref(null)
const openChunk = (data) => {
  chunkContentDisplay.value = true
  nextTick(() => {
    chunkContentRef.value.initData(data)
  })
}

const fileDetailContentDisplay = ref(false)
const fileDetailContentRef = ref(null)
const openFileDetail = (data) => {
  fileDetailContentDisplay.value = true
  nextTick(() => {
    fileDetailContentRef.value.initData(data)
  })
}
</script>

<style lang="scss" scoped>
:deep(.date-colums) {
  padding: 10px 0;
}
.ivu-input-wrapper,
.ivu-select,
.el-select {
  max-width: 200px;
  min-width: 120px;
}

.breadcrumb-content {
  display: flex;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #ddd;
  padding: 12px 8px;
  justify-content: center;
  position: relative;
  .breadcrumb-list {
    position: absolute;
    left: 8px;
    top: 12px;
  }
  .nav-list {
    display: flex;
    align-items: center;
    font-size: 16px;
    li {
      cursor: pointer;
      transition: all 0.5s;
      &:hover {
        opacity: 0.9;
      }
      &:nth-child(n + 2) {
        margin-left: 16px;
      }
      &.active {
        color: #4a8ae9;
        font-weight: bold;
      }
    }
  }
}
</style>
